/**
 * Created by Freeman on 2018/1/6.
 */
import React from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import PropTypes from 'prop-types'
import Ionicons from 'react-native-vector-icons/Ionicons'
import {COLOR} from '../../config'

const BlockMenu = ({onPress, style, leftIcon,rightIcon, text}) => {

  return (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.container, style]}>
      <View style={styles.leftContainer}>
        <Ionicons
          name={leftIcon}
          size={26}
          style={styles.leftIcon}
        />
        <Text style={styles.leftText}>{text}</Text>
      </View>
      <View style={styles.rightIconContainer}>
        <Ionicons
          name={rightIcon}
          size={20}
          style={styles.rightIcon}
        />
      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    height: 45,
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderColor: COLOR.linePrompt,
    borderTopWidth: 1,
    backgroundColor: '#FFFFFF'
  },
  leftContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 16,
    marginRight: 16
  },
  leftIcon: {
    marginRight: 5,
    color: COLOR.textNormal
  },
  leftText: {
    fontSize: 16,
    color: COLOR.textEmpha
  },
  rightIconContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 16
  },
  rightIcon: {
    marginLeft: 5,
    fontSize: 16,
    color: COLOR.textNormal
  }
})

BlockMenu.propTypes = {
  onPress: PropTypes.func,
  style: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.number,
  ]),
  leftIcon: PropTypes.string,
  rightIcon: PropTypes.string,
  text: PropTypes.string,
}

export default BlockMenu
